<template>
	<z-nav-bar :title="title"></z-nav-bar>
	<view class="plan-item flex_fsc">
		<view class="title">阶段</view>
		<view class="flex_fsc">
			<view class="uni-585C66">第</view>
			<input
				v-model="data.serialNumber"
				type="number"
				class="phase-input"
				placeholder="阶段"
				placeholder-class="uni-placeholder"
			/>
			<view class="uni-585C66">阶段</view>
			<view class="uni-ml-24" style="color: #c4c7cc">请输入小于99的数字</view>
		</view>
	</view>
	<view class="plan-item flex_fsc">
		<view class="title">计划名称</view>
		<input
			v-model="data.name"
			type="text"
			class="input"
			placeholder="请输入计划名称"
			placeholder-class="uni-placeholder"
		/>
	</view>
	<view class="plan-item flex_fsc">
		<view class="title">预计课时</view>
		<input
			v-model="data.duration"
			type="number"
			class="input"
			placeholder="预计课时"
			placeholder-class="uni-placeholder"
		/>
	</view>
	<view class="plan-item flex_fsc">
		<view class="title">教学费</view>
		<input
			v-model="data.price"
			type="number"
			class="input"
			placeholder="请输入教学费"
			placeholder-class="uni-placeholder"
		/>
	</view>
	<view class="plan-item flex_fsc" style="height: auto;">
		<view class="title">计划目标</view>
		<view>
			<view v-for="(target, index) in data.planTarget" :key="target" class="flex_fsc uni-mb-16">
				<input
					v-model="planTarget[index]"
					class="input"
					style="width: 410rpx"
					placeholder="请输入计划目标"
					placeholder-class="uni-placeholder"
					:key="index"
				/>
				<view v-if="index" class="button-common uni-red-bg" @click="data.planTarget.splice(index, 1);planTarget.splice(index, 1)">-</view>
				<view v-else class="button-common uni-color-main-bg" @click="data.planTarget.push('');planTarget.push('')">+</view>
			</view>
		</view>
	</view>
	<view class="course-tool flex_sbc">
		<view class="flex_fsc z-font-32">
			<text class="uni-mr-16">课程数</text>
			<text class="text-w uni-orange">{{ data.relStuCourseList.length }}</text>
		</view>
		<view class="flex_fsc">
			<view class="button" @click="addCourse">批量选择已有体系课程</view>
			<view class="button uni-ml-40" @click="addCoursePage">添加课程</view>
		</view>
	</view>
	<view class="course-item">
		<view v-for="(item, cindex) in data.relStuCourseList || []" :key="item.id" class="item flex_sbc">
			<view class="u-line-1">{{ item.name }}</view>
			<image
				:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
				class="icon-size-32 uni-ml-40"
				@click="deleteCourse(item)"
			></image>
		</view>
	</view>
	<bottom-box :buts="buts" @change="butChange"></bottom-box>
</template>

<script setup>
import { addCoursePlan, editCoursePlan, getPlanDetail } from '@/api/player.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const data = reactive(uni.getStorageSync('edit-plan') || { relStuCourseList: [] }),
	playerInfo = uni.getStorageSync('player-info'),
	title = data.id ? '编辑计划' : '新建计划',
	planTarget = ref([]);
data.planTarget = data.planTarget ? data.planTarget.split('$$') : ['']
data.id &&
	getPlanDetail(data.id).then((res) => {
		Object.assign(data, res);
		data.relStuCourseList.forEach((item) => {
			item.id = item.relSystemCourse;
		});
		data.planTarget = data.planTarget ? data.planTarget.split('$$') : ['']
		planTarget.value = data.planTarget
	});
data.result = {};

function addCourse() {
	uni.setStorageSync('select-course', data.relStuCourseList);
	uni.navigateTo({
		url: '/pages/player/course/select',
		events: {
			selCourse: (selCourseList) => {
				data.relStuCourseList = selCourseList;
			}
		}
	});
}

// 添加课程
function addCoursePage() {
	uni.setStorageSync('edit-course', {});
	uni.navigateTo({
		url: '/pages/player/course/course-edit',
		events: {
			editDone: (data) => {
				setTimeout(() => {
					addCourse();
				});
			}
		}
	});
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function butChange() {
	if (!data.serialNumber) return that.tools.alert('请输入计划阶段');
	if (!data.name) return that.tools.alert('请输入计划名称');
	if (!data.price) return that.tools.alert('请输入学费');
	data.result = {};
	data.relStuCourseList.forEach((item) => {
		if (data.relSystemCourse && data.relSystemCourse.includes(item.id)) {
			data.result[item.id] = item.result;
		} else {
			const result = {};
			const relQuestionScheme = JSON.parse(item.relQuestionScheme);
			Object.keys(relQuestionScheme).forEach((el) => {
				const trainingPoints = {};
				relQuestionScheme[el].forEach((rqs) => (trainingPoints[rqs] = []));
				result[el] = {
					trainingState: false,
					summaryComment: [],
					trainingPoints
				};
			});
			data.result[item.id] = result;
		}
	});
	console.log(planTarget.value.join('$$'));
	const { serialNumber, name, duration, price, courseList, system, relStuCourseList } = data;
	const postData = {
		serialNumber,
		name,
		duration,
		price,
		stuId: playerInfo.id,
		type: 1,
		relSystemCourse: relStuCourseList.map((item) => item.id).join(','),
		result: JSON.stringify(data.result),
		planTarget: planTarget.value.join('$$')
	};
	const funName = data.id ? editCoursePlan : addCoursePlan;
	funName(postData, data.id).then((res) => {
		eventChannel.emit('editDone');
		uni.navigateBack();
	});
}

function deleteCourse(item) {
	const relIndex = data.relStuCourseList.findIndex((el) => el.id == item.id);
	data.relStuCourseList.splice(relIndex, 1);
}
</script>

<style lang="scss">
@import './css/plan-edit.scss';
</style>
